<template>
  <div class="pagination">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      :pager-count="pagerCount"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
  props: {
    current: {
      type: Number,
      default: 1,
      required: true,
    },
    pageSize: {
      type: Number,
      default: 10,
      required: true,
    },
    total: {
      type: Number,
      default: 0,
      required: true,
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    pagerCount: {
      type: Number,
      default: 7,
    },
  },
})
export default class Pagination extends Vue {
  handleSizeChange(e: number) {
    this.$emit("update:pageSize", e);
    this.$emit("getList");
  }

  handleCurrentChange(e: number) {
    this.$emit("update:current", e);
    this.$emit("getList");
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  margin: 10px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>